<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ajax原生用法</title>
  </head>
  <body>
    <script>
      // XMLHttpRequest 它是js内置对象，主要用于发送ajax请求。
      // 1. 实例化xhr对象：发送请求
      var xhr = null;
      if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // 主流浏览器的写法
      else if (window.ActiveXObject) xhr = new ActiveXObject(); // ie低版本浏览器的写法

      // 4. 监听xhr请求状态的变化，接收请求的数据，只要状态变化，就会触发onreadystatechange函数，这个监听一定要写在open的上方，否则该函数失效。
      // 0 1 2 3 4(表示请求成功)
      xhr.onreadystatechange = () => {
        if (xhr.status == 200 && xhr.readyState == 4) {
          console.log(xhr.responseText);
        }
      };

      // 2. 配置请求方式和url接口地址
      xhr.open(
        "POST",
        "https://apif.java.crmeb.net/api/front/index/product/1?page=1&limit=6"
      );

      // 配置请求头内容
      xhr.setRequestHeader("user-agent", "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1 Edg/106.0.0.0");
      xhr.setRequestHeader("content-type", "x-www-form-urlencoded"); // 指定发送请求时，以什么方式携带参数。x-www-form-urlencoded(以表单的方式携带参数，一般ajax请求不指定content-type时，它就是默认值)

      // 3. 发送请求并在请求体中携带请求参数
      xhr.send("a=100&b=200");
      // xhr.send({
      //   a: 100,
      //   b: 200
      // })

      // 面试点：
      // 1. xhr.readyState每个状态的含义;
      // 2. 描述原生ajax请求的基本流程；

      // 平常发送请求，关注几点内容：
      // 1. 请求方式：GET/POST/PUT/DELETE
      // 2. 请求参数：POST请求/PUT请求这个两种请求参数都是放在请求体中。当然任何请求方式都支持查询字符串?。GET和DELETE请求只支持查询字符串向服务器传参，不支持请求体的写法。
      // 3. 请求头中的content-type：一般情况下，它不需要设置。
    </script>
  </body>
</html>
